<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>走马灯案例</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
       <input type="button" value="浪起来" @click="lang">
       <input type="button" value="低调" @click="stop">
       <h1>{{msg}}</h1>       
    </div>
	<script>
        var app=new Vue({
        	el:'#app',
        	data:{
               msg:'猥琐发育,别浪~~!',
               timeId:null
        	},
        	methods:{
        		lang(){
        			if(this.timeId!=null)return;
              //this.timeId!=null 直接跳出去 不执行下面的代码
        			this.timeId=setInterval(()=>{
        			   //获取第一个字符
        			   var start=this.msg.substring(0,1)
        			   //获取后面的字符
        			   var end=this.msg.substring(1)
        			   this.msg=end+start
        		    },400)
        		},

                stop(){
                   clearInterval(this.timeId)
                   this.timeId=null;
                }

            }
        })
	</script>
</body>
</html>